<script setup>
import { gameList } from '@/config/game'
// 启动游戏
const startGame = () => {
  // window.open('/#/peerStream')
}
</script>
<template>
  <div class="game-list py-[20px]">
    <div class="text-[#00c2ff] text-[16px] font-bold mt-[20px]">我的游戏</div>
    <div class="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-8 gap-[20px] mt-[20px]">
      <div
        @click="startGame"
        class="flex flex-col items-center justify-center bg-[#20222e] hover:bg-[#222] group rounded-md overflow-hidden shadow-md cursor-pointer"
        v-for="(item, index) in [...gameList, ...gameList]"
        :key="index"
      >
        <div
          class="bg-no-repeat h-[0] origin-bottom bg-center pb-[65%] w-[100%] bg-cover group-hover:scale-[110%] transition-all"
          :style="{ backgroundImage: 'url(' + item.img + ')' }"
        ></div>

        <div class="py-[10px] text-[13px] line-clamp-1">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>
